<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎回来：{{name}}</div>
    <el-row :gutter="20" class="d-count">
      <el-col :span="4">
        <div class="bg-purple">
          <span class="svg-container flag">
            <svg-icon icon-class="my-qiye"></svg-icon>
          </span>
          <span class="tit">
            单位数量
          </span>
          <span class="num">
            {{userDeviceNumber.userNum}}
          </span>
          <span class="svg-container shengluehao">
            <router-link >
              <svg-icon icon-class="my-shenglvehao"></svg-icon>
            </router-link>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple bg-purple-5">
          <span class="svg-container flag">
            <svg-icon icon-class="my-weizhi"></svg-icon>
          </span>
          <span class="tit">
            测点数量
          </span>
          <span class="num">
            {{userDeviceNumber.deviceNum}}
          </span>
          <span class="svg-container shengluehao">
            <router-link >
              <svg-icon icon-class="my-shenglvehao"></svg-icon>
            </router-link>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple bg-purple-2">
          <span class="svg-container flag">
            <svg-icon icon-class="my-weizhi"></svg-icon>
          </span>
          <span class="tit">
            在线设备
          </span>
          <span class="num">
            {{userDeviceNumber.startNum}}
          </span>
          <span class="svg-container shengluehao">
            <router-link >
              <svg-icon icon-class="my-shenglvehao"></svg-icon>
            </router-link>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple bg-purple-3">
          <span class="svg-container flag">
            <svg-icon icon-class="my-jiance"></svg-icon>
          </span>
          <span class="tit">
            超标监测点
          </span>
          <span class="num">
            {{userDeviceNumber.poliNum}}
          </span>
          <span class="svg-container shengluehao">
            <router-link >
              <svg-icon icon-class="my-shenglvehao"></svg-icon>
            </router-link>
          </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple bg-purple-4">
          <span class="svg-container flag">
            <svg-icon icon-class="my-lixian"></svg-icon>
          </span>
          <span class="tit">
            离线设备
          </span>
          <span class="num">
            {{userDeviceNumber.deviceNum - userDeviceNumber.startNum}}
          </span>
          <span class="svg-container shengluehao">
            <router-link>
              <svg-icon icon-class="my-shenglvehao"></svg-icon>
            </router-link>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="d-mod">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <strong>快捷入口</strong>
          </div>
          <div class="quickly-link">
            <router-link to="/realtime-data">
              <el-button type="primary" plain size="small">实时数据</el-button>
            </router-link>
            <router-link to="/warn">
              <el-button type="primary" plain size="small">告警事件</el-button>
            </router-link>
            <router-link to="/mapdemo">
              <el-button type="primary" plain size="small">地图预览</el-button>
            </router-link>
            <router-link to="/history">
              <el-button type="primary" plain size="small">历史数据</el-button>
            </router-link>
            <router-link to="/alarmAnalysis">
              <el-button type="primary" plain size="small">告警分析</el-button>
            </router-link>
            <router-link to="/isp">
              <el-button type="primary" plain size="small">单位管理</el-button>
            </router-link>
            <router-link to="/device">
              <el-button type="primary" plain size="small">测点管理</el-button>
            </router-link>
            <router-link to="/account/password">
              <el-button type="primary" plain size="small">修改密码</el-button>
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queUserDeviceNumberByUserid } from '@/api/user'

export default {
  name: 'dashboard',
  data() {
    return {
      userDeviceNumber: {
        deviceNum: 0,
        userNum: 0,
        startNum: 0,
        poliNum: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'token'
    ])
  },
  created() {
    queUserDeviceNumberByUserid({
      userId: this.token
    }).then(response => {
      this.userDeviceNumber = Object.assign({}, response)
      console.log(this.userDeviceNumber)
    }).catch(() => {
    })
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
    .d-count{
      .bg-purple{
        color: #fff;
        height: 150px;
        border-radius: 10px;
        padding: 15px;
        position: relative;
        .flag{
          font-size: 24px;
        }
        .tit{
          margin-left: 5px;
          font-size: 18px;
          position: relative;
          top: -2px;
        }
        .shengluehao{
          font-size: 20px;
          cursor: pointer;
          position: absolute;
          bottom: 15px;
          right: 20px;
        }
        .num{
          display: block;
          font-size: 24px;
          text-align: center;
          margin-top: 25px;
        }
        background-color: #2663fe;
        background: -moz-linear-gradient(top, #01befe 10%, #2663fe 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#01befe), color-stop(100%,#2663fe));
        background: -webkit-linear-gradient(top, #01befe 10%,#2663fe 100%);
        background: -o-linear-gradient(top, #01befe 10%,#2663fe 100%);
        background: -ms-linear-gradient(top, #01befe 10%,#2663fe 100%);
        background: linear-gradient(to bottom, #01befe 10%,#2663fe 100%);
      }
      .bg-purple-2{
        background-color: #00cd94;
        background: -moz-linear-gradient(top, #29d3a4 10%, #00cd94 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#29d3a4), color-stop(100%,#00cd94));
        background: -webkit-linear-gradient(top, #29d3a4 10%,#00cd94 100%);
        background: -o-linear-gradient(top, #29d3a4 10%,#00cd94 100%);
        background: -ms-linear-gradient(top, #29d3a4 10%,#00cd94 100%);
        background: linear-gradient(to bottom, #29d3a4 10%,#00cd94 100%);
      }
      .bg-purple-5{
        background-color: #F96A46;
        background: -moz-linear-gradient(top, #F98546 10%, #F96A46 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#F98546), color-stop(100%,#00cd94));
        background: -webkit-linear-gradient(top, #F98546 10%,#F96A46 100%);
        background: -o-linear-gradient(top, #F98546 10%,#F96A46 100%);
        background: -ms-linear-gradient(top, #F98546 10%,#F96A46 100%);
        background: linear-gradient(to bottom, #F98546 10%,#F96A46 100%);
      }
      .bg-purple-3{
        background-color: #f05174;
        background: -moz-linear-gradient(top, #fb8a6c 10%, #f05174 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#fb8a6c), color-stop(100%,#f05174));
        background: -webkit-linear-gradient(top, #fb8a6c 10%,#f05174 100%);
        background: -o-linear-gradient(top, #fb8a6c 10%,#f05174 100%);
        background: -ms-linear-gradient(top, #fb8a6c 10%,#f05174 100%);
        background: linear-gradient(to bottom, #fb8a6c 10%,#f05174 100%);
      }
      .bg-purple-4{
        background-color: #9faab6;
        background: -moz-linear-gradient(top, #cfd4da 10%, #9faab6 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#cfd4da), color-stop(100%,#9faab6));
        background: -webkit-linear-gradient(top, #cfd4da 10%,#9faab6 100%);
        background: -o-linear-gradient(top, #cfd4da 10%,#9faab6 100%);
        background: -ms-linear-gradient(top, #cfd4da 10%,#9faab6 100%);
        background: linear-gradient(to bottom, #cfd4da 10%,#9faab6 100%);
      }
    }
    .d-mod{
      margin-top: 20px;
      
    }
  }
  &-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
  }
}
</style>
